<template>
  <div class="bj">
  <div class="login"><br><br><br>
     <h1> <img src="../../static/images/logo.jpeg" width="100px" height="100px" alt="" class="logo">
       <font color="#ffd700">金牌</font>旅游欢迎你</h1>

  <el-form ref="from" :model="user" label-width="80px"><br><br>
    账号:<el-input v-model="user.username" style="width: 200px;" clearable placeholder="请输入账号"></el-input><br><br><br><br><br>
    密码:  <el-input v-model="user.password" style="width: 200px;" clearable show-password placeholder="请输入密码"></el-input>
    <el-form-item><br>
      <el-button type="primary" @click="handleLogin">登录</el-button>
    </el-form-item>
  </el-form>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        userId: "",
        username: "",
        password: "",
      }
    }
  },
  name: "Smart",
  methods: {
    handleLogin() {
      if (this.user.username === '' || this.user.password === '') {
        this.$message.error('账号或密码不能为空');
      } else {
        this.axios.post('http://localhost:1000/user/login', this.user)
            .then(res => {
              console.log(res.data);
              const result = res.data;
              if (result.code === 200) {
                this.$message.success('登录成功');
                // setTimeout(() => {
                //   this.$router.push({path: '/user', query: {userId: JSON.stringify(this.user.userId)}});
                // }, 2000);
                this.$router.push({path: '/home'});
                localStorage.setItem("username",JSON.stringify(this.user.username))
              }else {
                this.$message.error(result.msg);
              }
            })
            .catch(err => {
              this.$message.error('登录失败，请检查账号和密码');
              console.error(err);
            });
      }
    }
  }
}
</script>

<style scoped>
.bj{ width: 100%;
  height: 1000%;
  background-image: url("../../static/images/背景.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
.login{
  width: 100%;
  height: 680px;
  margin: 0 auto;
}
.logo{
  border-radius: 50%;
}
</style>
